<template>
  <div class="_flex-y _flex-a-stretch _font _wrapper-y">
    <el-divider content-position="left">{{ deviceInfo.name }}</el-divider>
    <div :class="{ '_font-red': deviceInfo.status == 0 }">
      设备编码：{{ deviceInfo.code }} -
      {{ deviceInfo.status ? "在线" : "离线" }}
    </div>
    <div>创建时间：{{ $tool.dateStr(deviceInfo.created_date) }}</div>
    <div>描述信息：{{ deviceInfo.note }}</div>
    <div>
      最后登录：{{ deviceInfo.last_conn_ip }} -
      {{ $tool.dateStr(deviceInfo.last_conn_time) }}
    </div>
    <div class="_flex-item-1 _over-hidden">
      <el-tabs style="height: 100%">
        <el-tab-pane label="采集数据">
          <comIotDeviceData v-if="deviceInfo.code" :comCode="deviceInfo.code" />
        </el-tab-pane>
        <el-tab-pane label="运行数据">
          <comIotDeviceRun v-if="deviceInfo.code" :comCode="deviceInfo.code" />
        </el-tab-pane>
        <el-tab-pane label="指令数据">
          <comIotDeviceCmdOpt
            v-if="deviceInfo.code"
            :comCode="deviceInfo.code"
          />
        </el-tab-pane>
        <el-tab-pane label="实时上报">
          <comIotDeviceMsg v-if="deviceInfo.code" :comCode="deviceInfo.code" />
        </el-tab-pane>
        <el-tab-pane label="数据检测(富铭)">
          <fm-data v-if="deviceInfo.code" :comCode="deviceInfo.code" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import toolAction from "@/tool/http/tool-action";
import comIotDeviceData from "./com-iot-device-data.vue";
import comIotDeviceRun from "./com-iot-device-run.vue";
import comIotDeviceCmdOpt from "./com-iot-device-cmd-opt.vue";
import comIotDeviceMsg from "./com-iot-device-msg.vue";
import fmData from "../fm-data/fm-data.vue";

let thingsDeviceApi = toolAction.init("things_device");

export default {
  components: {
    comIotDeviceData,
    comIotDeviceRun,
    comIotDeviceCmdOpt,
    comIotDeviceMsg,
    fmData,
  },
  props: {
    deviceId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      deviceInfo: {},
    };
  },
  mounted() {
    this.initDevice();
  },
  methods: {
    initDevice() {
      thingsDeviceApi.view({ id: this.deviceId }).then((res) => {
        this.deviceInfo = res;
      });
    },
  },
};
</script>
<style>
.el-tabs__content,
.el-tab-pane {
  height: 100%;
}
.el-tab-pane {
  padding-bottom: 50px;
}
</style>
